<template>
    <div class="app-container">
        <div class="dialogbox-content">
            <div class="dialogbox-content-left" @click="showEmojiList = false">
                <a-spin :tip="$t('basics.jiazaizhong')">
                    <div
                        class="text-[18px] pb-[20px] flex"
                        style="justify-content: space-between"
                    >
                        <a-tag
                            size="large"
                            @close="clearSysPhoneNumber"
                            v-if="system_phonenumber"
                            closable
                            >{{ system_phonenumber }}</a-tag
                        >
                        &nbsp;
                        <!-- Message -->

                        <!-- <div
                            class="flex"
                            style="position: relative; padding: 0 10px 0 20px"
                        >
                            <img
                                src="@/assets/images/ic_fenlei_search.png"
                                class="w-[22px] h-[22px]"
                                alt=""
                                style="
                                    margin-left: 14px;
                                    cursor: pointer;
                                    position: absolute;
                                    top: 4px;
                                    left: 14px;
                                    z-index: 111;
                                "
                                @click="sherhchange"
                            />
                            <a-input
                                style="background: #2e323d; padding-left: 40px"
                                v-model="shertop"
                                class="bg-[#2E323D]"
                                placeholder="系统号码查询"
                                @clear="sherhchange"
                            />
                            <div
                                style="
                                    position: absolute;
                                    width: 142px;
                                    font-size: 14px;
                                    line-height: 30px;
                                    background: #2e323d;
                                    top: 30px;
                                    left: 20px;
                                "
                            >
                                <ul style="padding: 0 10px">
                                    <li>13128888888</li>
                                </ul>
                            </div>
                        </div> -->
                        <div>
                            <a-button
                                style="height: 30px; font-size: 12px"
                                type="primary"
                                class="ml-3 fr"
                                @click="addAdmin(1)"
                            >
                                {{ $t('basics.createdMessage') }}
                            </a-button>
                            <a-button
                                style="height: 30px; font-size: 12px"
                                type="primary"
                                class="ml-3 fr"
                                @click="addAdmin(2)"
                            >
                                {{ $t('basics.selectSendNumber') }}
                            </a-button>
                        </div>
                    </div>
                    <div class="content-left-conversation">
                        <div class="w100 h-auto relative">
                            <div
                                style="position: relative"
                                class="flex serch-input rounded-[10px] items-center"
                            >
                                <img
                                    src="@/assets/images/ic_fenlei_search.png"
                                    class="w-[22px] h-[22px] search-img"
                                    alt=""
                                    @click="sherhchange"
                                />
                                <a-input
                                    style="padding: 6px 30px"
                                    v-model="shertop"
                                    :placeholder="$t('basics.numberQuery')"
                                    @press-enter="sherhchange"
                                    @clear="sherhchange"
                                    @focus="chatFocus"
                                    @blur="chatBlur"
                                    @input="chatInput"
                                >
                                </a-input>
                                <div
                                    class="reset-o"
                                    v-if="state.chatShow"
                                    style="
                                        cursor: pointer;
                                        position: absolute;
                                        top: 44px;
                                        left: 0.5%;
                                        background: #fff;
                                        width: 99%;
                                        z-index: 1;
                                        line-height: 30px;
                                        color: #000;
                                        padding: 0 10px;
                                        max-height: 150px;
                                        overflow-y: scroll;
                                        box-shadow: 0px 0px 1px 1px
                                            rgba(0, 0, 0, 0.2);
                                    "
                                >
                                    <ul>
                                        <li
                                            @click="activeChatPhone(item)"
                                            v-for="item in chatData"
                                        >
                                            {{ item.system_phonenumber }}
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <a-tabs
                                :tabBarStyle="{ borderBottom: 'unset' }"
                                v-model:activeKey="activeKey"
                                @change="handleClick"
                            >
                                <!--  {{ $t('basics.allSend') }} -->

                                <!-- {{ $t('basics.mySend') }} -->
                                <a-tab-pane :key="1"
                                    ><template #title
                                        ><icon-message />{{
                                            $t('basics.allSend')
                                        }}
                                    </template></a-tab-pane
                                >
                                <a-tab-pane :key="2"
                                    ><template #title
                                        ><icon-message />{{
                                            $t('basics.mySend')
                                        }}
                                        <span :class="{ cored: sum > 0 }"
                                            >({{ mychats }}/{{
                                                sum || 0
                                            }})</span
                                        >
                                    </template></a-tab-pane
                                >
                                <a-tab-pane :key="3"
                                    ><template #title>
                                        <icon-user-group />
                                        {{ $t('basics.customSystem') }}
                                    </template></a-tab-pane
                                >
                            </a-tabs>
                        </div>
                        <div
                            v-if="records.length"
                            class="listmap h100"
                            @scroll="handleScroll"
                        >
                            <div
                                class="panellist w100"
                                v-for="(item, index) in records"
                                :key="index"
                                :class="
                                    state.infostatus == index ? 'tabcor' : ''
                                "
                                @click="changtab(item, index)"
                            >
                                <div
                                    style="justify-content: space-between"
                                    class="flex alcen infolistmap"
                                >
                                    <div
                                        style="
                                            display: flex;
                                            align-items: center;
                                        "
                                    >
                                        <div class="avatar flex-shrink-0">
                                            <img
                                                :src="`${$url}gms.jpg`"
                                                v-if="item.is_customer_service"
                                                alt=""
                                            />
                                            <img
                                                :src="`${$url}${item.avatar_id}.jpg`"
                                                v-else
                                                alt=""
                                            />
                                        </div>
                                        <div
                                            style="
                                                justify-content: space-between;
                                            "
                                            class="flex-1 flex centeinfo"
                                        >
                                            <div class="sz16 font_bo">
                                                {{ item.target_phone_number }}
                                            </div>
                                            <div class="sz14 cocc ellipsis">
                                                {{ item.last_message }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="h-full sz12 infotime cocc flex">
                                        <span
                                            class="h-full leading-5"
                                            v-if="item.last_message_at"
                                            >{{
                                                item.last_message_at
                                                    .split('-')
                                                    .slice(-2)
                                                    .join('-')
                                            }}</span
                                        >
                                        <div
                                            v-if="item.num_of_unread > 0"
                                            class="unread-count"
                                        >
                                            {{ item.num_of_unread }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            v-else
                            class="w100 flex jucen zujl"
                            style="justify-content: center"
                        >
                            <div>
                                <img src="@/assets/images/zwhh.png" alt="" />
                                <div
                                    style="text-align: center"
                                    class="w100 center mt10"
                                >
                                    {{ $t('basics.zanwuduihua') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </a-spin>
            </div>
            <div class="dialogbox-content-right" v-if="other">
                <a-spin :loading="loading">
                    <div class="content-right-content flex flex-col">
                        <div class="content-right-header flex">
                            <div class="avatar">
                                <img
                                    :src="`${$url}${otherRemand}.jpg`"
                                    alt=""
                                />
                            </div>
                            <div
                                class="phone record-info flex leading-[20px] justify-center items-center"
                            >
                                {{ activeObj.system_phonenumber }}
                                {{ $t('basics.yu') }} &nbsp;
                                <span>{{ other }}&nbsp;&nbsp;</span>
                                {{ $t('basics.deliantian') }}
                            </div>
                        </div>
                        <div
                            class="panetop w100 flex h-[100% - 78px] flex-1"
                            style="height: calc(100% - 78px)"
                        >
                            <div
                                class="contents w100 flex-1"
                                ref="scrollableDiv"
                                @click="showEmojiList = false"
                            >
                                <div
                                    class="w100 center sz12 mb5"
                                    style="
                                        color: #ccc;
                                        font-family: PingFangSC-Medium;
                                        font-size: 14px;
                                        font-style: normal;
                                        font-weight: 500;
                                    "
                                >
                                    {{ $t('basics.zhanshi') }}
                                </div>
                                <div
                                    class="w100"
                                    v-for="(item, index) in datillist"
                                    :key="index"
                                >
                                    <div
                                        class="others flex"
                                        v-if="item.direction == 2"
                                    >
                                        <div class="others_hander">
                                            <img
                                                :src="`${$url}gms.png`"
                                                v-if="item.is_customer_service"
                                                alt=""
                                            />
                                            <img
                                                class="rounded-full"
                                                :src="`${$url}${otherRemand}.jpg`"
                                                v-else
                                                alt=""
                                            />
                                        </div>
                                        <div>
                                            <div class="mb5 others_text">
                                                {{
                                                    $common.formatDate(
                                                        new Date(
                                                            item.reply_time
                                                        )
                                                    )
                                                }}
                                            </div>
                                            <div
                                                class="chat_bubble"
                                                v-html="
                                                    item.message_content.replace(
                                                        /\n/g,
                                                        '<br>'
                                                    )
                                                "
                                            ></div>
                                        </div>
                                    </div>
                                    <div
                                        class="oneself flex rounded-full"
                                        v-if="item.direction == 1"
                                        :class="{ marginMes: item.status == 4 }"
                                    >
                                        <div
                                            class="flex-1 flex flex-col items-end"
                                        >
                                            <div
                                                class="flex ziyy w-full justify-end"
                                            >
                                                <div class="mb5 others_text">
                                                    {{
                                                        $common.formatDate(
                                                            new Date(
                                                                item.reply_time
                                                            )
                                                        )
                                                    }}
                                                </div>
                                            </div>
                                            <div
                                                class="flex ziyy max-w-3xl w-full justify-end"
                                            >
                                                <div
                                                    v-if="item.status == 4"
                                                    class="bandSend"
                                                >
                                                    <icon-exclamation-circle-fill
                                                        :size="22"
                                                        style="color: red"
                                                    />
                                                </div>
                                                <div
                                                    class="chat_bubble text-[14px]"
                                                    v-html="
                                                        item.message_content.replace(
                                                            /\n/g,
                                                            '<br>'
                                                        )
                                                    "
                                                ></div>
                                            </div>
                                        </div>
                                        <div
                                            class="others_hander flex-shrink-0 rounded-full"
                                        >
                                            <img
                                                class="rounded-full w-full h-[40px]"
                                                src="@/assets/images/2.jpg"
                                                alt=""
                                            />
                                        </div>
                                    </div>
                                </div>
                                <!-- <div
                                style="padding-top: 10px"
                                v-if="
                                    datillist.find((item) => item.status === 4)
                                "
                            >
                                <div
                                    @click="addMessage(activeObj)"
                                    style="display: flex; cursor: pointer"
                                    v-if="
                                        activeObj.is_reply === 1 &&
                                        activeObj.is_customer_service === 0
                                    "
                                    class="oneself-tips text-[#F85E65] justify-center items-center error-tips-info"
                                >
                                    <div
                                        class="bg-[#F85E65] text-[14px] bg-opacity-50 flex py-[5px] px-[10px] rounded-[10px]"
                                    >
                                        {{ $t('basics.CustomerService') }}
                                        <img
                                            class="ml-[7px] text-[0px]"
                                            src="@/assets/images/Framejt.png"
                                        />
                                    </div>
                                </div>
                            </div> -->
                                <!-- <div style="padding-top: 10px">
                                <div
                                    v-if="
                                        activeObj.is_reply === 1 &&
                                        activeObj.is_customer_service === 0 &&
                                        config_value.is_force_customer_service ===
                                            1 &&
                                        activeName !== 2
                                    "
                                    @click="addMessage(activeObj)"
                                    style="display: flex; cursor: pointer"
                                    class="oneself-tips text-[#F85E65] justify-center items-center error-tips-info"
                                >
                                    <div
                                        class="bg-[#F85E65] text-[14px] bg-opacity-50 flex py-[5px] px-[10px] rounded-[10px]"
                                    >
                                        {{ $t('basics.qingjinrukefuxitong') }}
                                        <img
                                            class="ml-[7px] text-[0px]"
                                            src="@/assets/images/Framejt.png"
                                        />
                                    </div>
                                </div>
                            </div> -->
                            </div>
                            <div
                                v-if="showEmojiList"
                                class="emoji-list"
                                :style="`top:${emojiListclientY}px;`"
                            >
                                <span
                                    v-for="emoji in faceList"
                                    :key="emoji"
                                    @click="addEmoji(emoji)"
                                    >{{ emoji }}</span
                                >
                            </div>
                            <div class="footer flex">
                                <div class="sendtitle flex alcen">
                                    <div
                                        class="sendiconlist flex alcen jucen cursor"
                                        @click.stop="toggleEmojiList"
                                    >
                                        <a-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="$t('basics.emo')"
                                            :open-delay="500"
                                            position="bottom"
                                        >
                                            <img
                                                src="@/assets/images/表情.png"
                                                alt=""
                                            />
                                        </a-tooltip>
                                    </div>
                                    <div
                                        class="sendiconlist flex alcen jucen cursor"
                                        @click="popupVisible = true"
                                    >
                                        <a-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="$t('basics.first_reply')"
                                            :open-delay="500"
                                            position="bottom"
                                        >
                                            <img
                                                src="@/assets/images/chat1.png"
                                                @click="getQuickReply(1)"
                                                alt=""
                                            />
                                        </a-tooltip>
                                    </div>
                                    <div
                                        class="sendiconlist flex alcen jucen cursor"
                                        @click="popupVisible = true"
                                    >
                                        <a-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="$t('basics.second_reply')"
                                            :open-delay="500"
                                            position="bottom"
                                        >
                                            <img
                                                src="@/assets/images/Group21.png"
                                                @click="getQuickReply(2)"
                                                alt=""
                                            />
                                        </a-tooltip>
                                    </div>
                                    <div
                                        class="sendiconlist flex alcen jucen cursor"
                                        @click="popupVisible = true"
                                    >
                                        <a-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="$t('basics.BeCommon')"
                                            :open-delay="500"
                                            position="bottom"
                                        >
                                            <img
                                                @click="getQuickReply(0)"
                                                src="@/assets/images/Group31.png"
                                                alt=""
                                            />
                                        </a-tooltip>
                                    </div>
                                    <!-- <div
                                        class="sendiconlist flex alcen jucen cursor"
                                    >
                                        <a-tooltip
                                            class="item"
                                            effect="dark"
                                            :content="$t('basics.sendNum')"
                                            :open-delay="500"
                                            position="bottom"
                                        >
                                            <a-switch
                                                v-model="state.switchStatus"
                                                :checked-value="1"
                                                :unchecked-value="2"
                                                :style="`background:${
                                                    state.switchStatus == 1
                                                        ? 'blue'
                                                        : ''
                                                };`"
                                            />
                                        </a-tooltip>
                                    </div> -->
                                </div>
                                <div
                                    style="padding: 0 10px 10px"
                                    class="flex-1 sendxinfo"
                                >
                                    <textarea
                                        class="h-auto chat-txtarea w-full outline-none rounded-[10px] p-4"
                                        :placeholder="$t('basics.warnText')"
                                        :disabled="
                                            activeObj.is_reply === 1 &&
                                            activeObj.is_customer_service ===
                                                0 &&
                                            config_value.is_force_customer_service ===
                                                1
                                        "
                                        v-model="state.text"
                                        style="
                                            word-break: break-all;
                                            height: 130px;
                                        "
                                        @input="textareaInput"
                                        @keydown.enter="handleKeyUp"
                                        @focus="hideBtn()"
                                        @blur="btnshow = true"
                                    />
                                    <div
                                        class="sending h-[36px] top-2/4 -translate-y-2/4"
                                        v-show="btnshow"
                                    >
                                        <a-button
                                            v-if="
                                                activeObj.is_reply === 1 &&
                                                activeObj.is_customer_service ===
                                                    0 &&
                                                config_value.is_force_customer_service ===
                                                    1
                                            "
                                            type="info"
                                            size="large"
                                            style="background: #909399"
                                            >{{
                                                $t('basics.sendMessage')
                                            }}</a-button
                                        >
                                        <a-button
                                            v-else
                                            type="primary"
                                            size="large"
                                            style="background: #4780ff"
                                            @click="sendinfo"
                                            >{{
                                                $t('basics.sendMessage')
                                            }}</a-button
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-spin>
            </div>
        </div>
        <div
            v-show="popupVisible"
            @click.stop="popupVisible = false"
            class="absolute w-full h-full z-20 left-0 top-0"
        >
            <div
                class="w-[40%] flex flex-col h-[40%] pt-[48px] px-[30px] rounded-[20px] bg-[rgba(47,55,68,0.8)] shadow-[0px_0px_20px_4px_rgba(191,212,255,0.25)] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
            >
                <div
                    class="border-b border-[#b7cdff24] flex px-[30px] pb-[15px] items-center gap-[10px] justify-around"
                >
                    <div class="flex gap-[15px] items-center">
                        <div
                            class="text-[#fff] text-[18px] font-normal leading-5"
                        >
                            {{ $t(txt) }}
                        </div>
                    </div>
                </div>

                <!-- 内容渲染列表 -->
                <div
                    class="flex-1 flex flex-col py-[10px] px-[10px] gap-3 overflow-y-auto"
                >
                    <div
                        v-for="(item, index) in quickReplyList"
                        :key="index"
                        @click="quickSend(item)"
                    >
                        <div
                            style="word-break: break-all"
                            class="py-2 whitespace-pre-wrap px-3 text-[#fff] rounded-[10px] transition-all duration-75 hover:bg-[#474A52] hover:cursor-pointer"
                        >
                            {{ item.reply_content }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a-modal
            v-model:visible="state.visible"
            :render-to-body="false"
            :footer="false"
        >
            <template #title>
                {{
                    dialogType === 1
                        ? $t('basics.createdMessage')
                        : $t('basics.sendPhoneNumber')
                }}
            </template>
            <a-form
                :model="formModel"
                ref="formModelRef"
                :rules="formModelRules"
            >
                <a-form-item
                    v-if="dialogType === 1"
                    field="phone"
                    :label="$t('basics.duifangshoujihaoma')"
                    label-col-flex="120px"
                    validate-trigger="blur"
                >
                    <a-input
                        class="dialog-inp"
                        style="margin-right: 20px"
                        v-model="formModel.phone"
                        :placeholder="$t('basics.qingshurshoujihaoma')"
                    />
                </a-form-item>
                <a-form-item
                    field="system_phonenumber"
                    :label="
                        dialogType === 1
                            ? $t('basics.systemPhoneNumber')
                            : $t('basics.sendPhoneNumber')
                    "
                    label-col-flex="120px"
                    validate-trigger="blur"
                >
                    <a-input
                        class="dialog-inp"
                        style="margin-right: 20px"
                        @focus="inputFocus"
                        @blur="inputBlur"
                        @input="serachInput"
                        v-model="formModel.system_phonenumber"
                        :placeholder="
                            dialogType === 1
                                ? $t('basics.systemPhoneNumber')
                                : $t('basics.sendPhoneNumber')
                        "
                    />
                </a-form-item>
            </a-form>
            <div class="dialog-foot">
                <a-button @click="state.visible = false" class="mr20">{{
                    $t('basics.concel')
                }}</a-button>
                <a-button @click="confirm" type="primary" class="mr20">{{
                    $t('basics.sure')
                }}</a-button>
            </div>
        </a-modal>
        <div
            v-show="state.isShow"
            ref="queryInput"
            class="reset-o"
            style="
                position: fixed;
                width: 324px;
                max-height: 200px;
                line-height: 30px;
                z-index: 9999;
                color: #000;
                background: #fff;
                border-radius: 4px;
                overflow-y: scroll;
                cursor: pointer;
                box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
            "
        >
            <ul style="">
                <li
                    @click="activePhone(item)"
                    v-for="item in serachData"
                    style="padding: 0 10px"
                >
                    {{ item.system_phonenumber }}
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance, nextTick } from 'vue';
import dayjs from 'dayjs';
import appData from '@/assets/images/emojis.json';
import appDataTwo from '@/assets/images/emojistwo.json';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@/store';
import { $request } from '@/utils/request.js';
import emos from '../america/dialogbox/emo.json';

const user = useUserStore().user;

const { t } = useI18n();

const state = reactive({
    switchStatus: 0,
    infostatus: -1,
    text: '',
    userId: '',
    visible: false,
    isShow: false,
    chatShow: false
});
const formModel = reactive({});
const formModelRules = reactive({});
const route = useRoute();
const { proxy } = getCurrentInstance();
const activeKey = ref(1);
const pageNum = ref(1);
const mobileNum = ref(null);
const records = ref([]);
const datillist = ref([]);
const faceList = ref([]);
const other = ref('');
const conversationid = ref('');
const shertop = ref(null);
const system_phonenumber = ref(null);
const ProjectId = ref(null);
const sum = ref(0);
const showEmojiList = ref(false);
const showloading = ref(false);
const activeName = ref(2);
const scrollableDiv = ref('');
const popover = ref('');
const popupVisible = ref(false);
const faceListTwo = ref([]);
const quickReplyList = ref([]);
const newId = ref();
const EveryTime = ref(true);
const btnshow = ref(true);
const loading = ref(false);
const hideBtn = () => {
    btnshow.value = false;
    showEmojiList.value = false;
};

const currentTime = ref(0);
const emojiListclientY = ref(500);
if (route.query.id) {
    state.userId = route.query.id;
    conversationid.value = route.query.id;
}
const otherRemand = ref();
// 控制防抖
const isSend = ref(false);

const getMessageAPI = async (id) => {
    return await $request
        .get('/client/message/getList', { conversation_id: id })
        .then((res) => {
            return res;
        });
};

const getOneByProjectKeyAPI = async (project_key) => {
    return await $request
        .get('/cloud/project/getOneByProjectKey', { project_key })
        .then(({ id }) => {
            return id;
        });
};

const getNumOfUnreadByAdminAPI = async (params) => {
    return await $request
        .get('/client/conversaion/getNumOfUnreadByAdmin', params)
        .then(({ total_num_of_unread }) => {
            return total_num_of_unread;
        });
};

const getNumOfUnreadAPI = async (project_id) => {
    return $request
        .get('/client/conversaion/getNumOfUnread', {
            project_id
        })
        .then(({ total_num_of_unread }) => {
            return total_num_of_unread;
        });
};

const getListByAdminAPI = async (conversation_id) => {
    return await $request
        .get('/client/message/getListByAdmin', { conversation_id })
        .then((res) => {
            return res;
        });
};

const getTcardList = async (con_id, user_id) => {
    // /commonConversation/getTcardMessageList
    return await $request
        .get('/client/commonConversation/getTcardMessageList', {
            con_id,
            user_id
        })
        .then((res) => res)
        .catch((e) => {
            loading.value = false;
            return {};
        });
};

const cardPhones = ref([]);
const listsPhone = ref([]);

const TcardPhone = async (is_online) => {
    let params = {
        page: 1,
        pageSize: 10000,
        user_id: user.id,
        is_online: is_online
    };
    await $request
        .get('/TcardClient/tphonenumberDetail/getList', params)
        .then(({ items }) => {
            cardPhones.value = items;
            if (!is_online) listsPhone.value = items;
        });
};

TcardPhone();

const resetPage = () => {
    nextTick(() => {
        const scrollDiv = proxy.$refs['scrollableDiv'];
        scrollDiv.scrollTop = scrollDiv.scrollHeight;
    });
};

const getElementTop = (element) => {
    var rect = element.getBoundingClientRect();
    return { top: rect.top, left: rect.left };
};

const activeChatPhone = (item) => {
    shertop.value = item.system_phonenumber;
};

const activePhone = (item) => {
    formModel.system_phonenumber = item.system_phonenumber;
};

const chatData = ref([]);

const chatFocus = async (e) => {
    //await TcardPhone();
    state.chatShow = true;
    console.log(shertop.value, listsPhone.value);
    chatData.value = !shertop.value
        ? listsPhone.value
        : listsPhone.value.filter((n) =>
              n.system_phonenumber.includes(shertop.value)
          );
};

const chatBlur = () => {
    setTimeout(() => {
        window.onresize = null;
        state.chatShow = false;
    }, 200);
};

const chatInput = () => {
    //formModel.system_phonenumber
    chatData.value = cardPhones.value.filter((n) =>
        n.system_phonenumber.includes(shertop.value)
    );
};

const inputFocus = (e) => {
    if (!cardPhones.value.length) return;
    state.isShow = true;
    serachData.value = !formModel.system_phonenumber
        ? cardPhones.value
        : cardPhones.value.filter((n) =>
              n.system_phonenumber.includes(formModel.system_phonenumber)
          );
    console.dir(getElementTop(e.target), 2333);
    let { top, left } = getElementTop(e.target);
    proxy.$refs['queryInput'].style.top = top + 32 + 'px';
    proxy.$refs['queryInput'].style.left = left - 11 + 'px';
    window.onresize = function () {
        let { top, left } = getElementTop(e.target);
        proxy.$refs['queryInput'].style.top = top + 32 + 'px';
        proxy.$refs['queryInput'].style.left = left - 11 + 'px';
    };
    console.log();
};
const serachData = ref([]);

const serachInput = () => {
    //formModel.system_phonenumber
    serachData.value = cardPhones.value.filter((n) =>
        n.system_phonenumber.includes(formModel.system_phonenumber)
    );
};

const inputBlur = () => {
    setTimeout(() => {
        window.onresize = null;
        state.isShow = false;
    }, 200);
};

const confirm = async () => {
    //https://app.apifox.com/link/project/4879138/apis/api-217771279
    ///TcardClient/conversation/createOneByOne
    console.log(dialogType.value);
    if (dialogType.value === 2) {
        //system_phonenumber
        other.value = null;
        datillist.value = [];
        records.value = [];
        pageNum.value = 1;
        system_phonenumber.value = formModel.system_phonenumber;
        await getCustomerservice('reset');
        state.visible = false;
        return;
    }
    if (!(formModel.phone && formModel.system_phonenumber)) {
        proxy.$message.error(t('basics.qingshurshoujihaoma'));
        return;
    }
    let params = {
        target_phonenumber: formModel.phone,
        system_phonenumber: formModel.system_phonenumber,
        user_id: user.id
    };
    $request
        .post('/TcardClient/conversation/createOneByOne', params)
        .then((res) => {
            console.log(res);
            system_phonenumber.value = null;
            formModel.phone = null;
            formModel.system_phonenumber = null;
            other.value = null;
            //activeKey.value = params;
            datillist.value = [];
            // other.value = "";
            records.value = [];
            pageNum.value = 1;
            getCustomerservice();
            state.visible = false;
        });
};

const dialogType = ref(1);

const addAdmin = async (type) => {
    //resetAdmin()
    await TcardPhone(type === 1 ? 1 : undefined);
    dialogType.value = type;
    proxy.$refs['formModelRef'].resetFields();
    state.visible = true;
};

const emoswitch = ref(0);

const getByKey = () => {
    $request
        .get('/cloud/config/getByKey', { config_key: 'is_rand_emoji' })
        .then(({ config_value }) => {
            emoswitch.value = config_value.switch;
            console.log('==========', emoswitch.value);
        });
};

getByKey();

// 获取美国项目id
const getId = async () => {
    showloading.value = true;
    let id = await getOneByProjectKeyAPI('america');
    showloading.value = false;
    ProjectId.value = id;
    getCustomerservice();
    let params = {
        user_id: user.id,
        page: pageNum.value,
        type: 2,
        target_phonenumber: shertop.value,
        system_phonenumber: system_phonenumber.value
    };
    // if (system_phonenumber) params['system_phonenumber'] = system_phonenumber;
    // if (activeKey.value === 'second') {
    //     params.is_reply = 1;
    // }
    await $request
        .get('/client/commonConversation/getList', params)
        .then(({ items, pageInfo }) => {
            mychats.value = pageInfo.total;
        });
    showloading.value = false;

    // getQuickReply();
    // getConversaionList();
    //getNumOf();
};
getId();
//获取未读短信数量
const getNumOf = async () => {
    if (state.userId) {
        let params = {
            project_id: ProjectId.value,
            user_id: state.userId
        };
        let total_num_of_unread = await getNumOfUnreadByAdminAPI(params);
        sum.value = total_num_of_unread;
    } else {
        let total_num_of_unread = await getNumOfUnreadAPI(ProjectId.value);
        sum.value = total_num_of_unread;
    }
};
const txt = ref('basics.common_reply');
const getQuickReply = (item) => {
    quickReplyList.value = [];
    if (item == 0) {
        txt.value = 'basics.common_reply';
    } else if (item == 1) {
        txt.value = 'basics.first_reply';
    } else {
        txt.value = 'basics.second_reply';
    }
    let params = {
        project_id: ProjectId.value,
        page: 1,
        reply_type: item,
        pageSize: 1000
    };
    $request.get('client/quickReply/getlist', params).then(({ items }) => {
        quickReplyList.value = items;
    });
};
const handleScroll = (event) => {
    const div = event.target;
    if (div.scrollHeight - div.scrollTop === div.clientHeight) {
        // 滚动条到达底部，执行你想要的操作
        if (records.value.length < tatol.value) {
            pageNum.value = pageNum.value + 1;
            // console.log(pageNum.value)
            //getConversaionList();
            getCustomerservice();
        }
    }
};

const customerNum = ref(0);
const getCustomerserviceUnred = () => {
    $request.get('/client/commonConversation/getNumOfUnread').then((res) => {
        console.log(res);
        //customerNum.value = res.num;
        sum.value = res.num;
    });
};
getCustomerserviceUnred();
const config_value = ref({});

const getPageInfo = () => {
    $request.get('/client/conversaion/getConfig').then(({ config_value }) => {
        config_value.value = config_value;
    });
};
getPageInfo();
const activeObj = ref({});
const changtab = async (e, index) => {
    //$request.source.cancal('取消请求');
    console.log('ppp');
    activeObj.value = e;
    activeObj.value.conversation_id = e.id;
    newId.value = 0;
    showEmojiList.value = false;
    otherRemand.value = e.is_customer_service ? 'gms' : e.avatar_id;
    conversationid.value = e.id;
    state.infostatus = index;
    mobileNum.value = e.target_phone_number;
    other.value = e.target_phone_number;
    // if (activeName.value == 1) {
    //     let url = state.userId
    //         ? '/client/message/clearUnreadByAdmin'
    //         : '/client/message/clearUnread';
    //     $request
    //         .post(url, {
    //             conversation_id: e.id
    //         })
    //         .then((res) => {
    //             e.num_of_unread = 0;
    //             getNumOf();
    //         });
    // }
    //if (activeName.value === 2) {
    datillist.value = [];
    $request
        .post('/client/commonConversation/clearUnread', { con_id: e.id })
        .then((res) => {
            e.num_of_unread = 0;
            getCustomerserviceUnred();
        });
    currentTime.value = Number(new Date());
    let isTime = currentTime.value;
    loading.value = true;
    let { items } = await getTcardList(e.id, route.query.user_id || user.id);
    let imgsad = `<img style="height:24px;display: inline-block;" src=/src/assets/dh.png />`;
    if (isTime === currentTime.value) {
        datillist.value = items.map((n) => {
            return {
                ...n,
                message_content:
                    n.direction === 2
                        ? n.message_content.replace('Cash App', imgsad)
                        : n.message_content
            };
        });
        resetPage();
        loading.value = false;
    }
    return;
    //}
    // datillist.value = state.userId
    //     ? await getListByAdminAPI(e.id)
    //     : await getMessageAPI(e.id);
    // resetPage();
};
const tatol = ref();
const mychats = ref(0);
// 获取对话列表
const getConversaionList = () => {
    showloading.value = true;
    let data = {
        user_id: state.userId,
        project_id: ProjectId.value,
        is_reply: activeName.value,
        target_phone_number: shertop.value,
        pageSize: 20,
        page: pageNum.value
    };
    let url = state.userId
        ? '/client/conversaion/getListByAdmin'
        : '/client/conversaion/getList';
    $request.get(url, data).then(({ pageInfo, items }) => {
        tatol.value = pageInfo.total;
        records.value.push(...items);
        records.value.map((items, index) => {
            if (state.userId) {
                if (newId.value == items.id) {
                    state.infostatus = index;
                }
            } else {
                items.otherRemand = Math.floor(Math.random() * 8) + 1;
            }
        });
        showloading.value = false;
    });
};
const handleClick = (params, isload) => {
    // console.log('444444444444444444444444444', activeKey.value);
    other.value = null;
    //activeKey.value = params;
    datillist.value = [];
    // other.value = "";
    records.value = [];
    pageNum.value = 1;
    //if (params == 'first') {
    //activeName.value = 0;
    //} else if (activeKey.value === 1 || activeKey.value === 2) {
    //activeName.value = 2;
    // console.log('tttttttttttttttttttttttttt', isload);
    if (isload === true) other.value = activeObj.value.target_phone_number;
    getCustomerservice('reset');
    return;
    // }
    //getConversaionList();
};
const getCustomerservice = async (str) => {
    if (showloading.value) return;
    showloading.value = true;
    //activeKey
    let params = {
        user_id: user.id,
        page: pageNum.value,
        type: Number(activeKey.value),
        target_phonenumber: shertop.value,
        system_phonenumber: system_phonenumber.value
    };
    // if (system_phonenumber) params['system_phonenumber'] = system_phonenumber;
    // if (activeKey.value === 'second') {
    //     params.is_reply = 1;
    // }
    console.log(activeKey.value, params);
    await $request
        .get('/client/commonConversation/getList', params)
        .then(({ items, pageInfo }) => {
            if (params.type === 2) mychats.value = pageInfo.total;
            tatol.value = pageInfo.total;
            let lists = items.map((i, index) => {
                if (newId.value == i.id) {
                    state.infostatus = index;
                }
                return {
                    ...i,
                    target_phone_number: i.target_phonenumber
                };
            });
            if (str === 'reset') records.value = [];
            //records.value = [];
            records.value.push(...lists);
        });
    showloading.value = false;
};

const loadEmojis = () => {
    (faceList.value = appData), (faceListTwo.value = appDataTwo);
};
loadEmojis();
const toggleEmojiList = (e) => {
    emojiListclientY.value = e.clientY;
    showEmojiList.value = !showEmojiList.value;
};
const handleKeyUp = (e) => {
    if (e.key === 'Enter' && e.ctrlKey) {
        state.text += '\n';
        return;
    }
    if (!isSend.value) {
        sendinfo();
        EveryTime.value = true;
    }
    e.returnValue = false;
};

const addEmoji = (emoji) => {
    state.text += emoji;
    showEmojiList.value = false;
};
const sherhchange = () => {
    datillist.value = [];
    other.value = '';
    records.value = [];
    pageNum.value = 1;
    //getConversaionList();
    getCustomerservice();
};

// 快捷语发送
const quickSend = (item) => {
    state.text = item.reply_content;
    popupVisible.value = false;
    // console.log(popover.value);
};

const textareaInput = () => {
    if (state.text.length > 360) {
        state.text = state.text.substring(0, 360);
    }
    if (state.text < 100) {
        EveryTime.value = true;
    }
    if (EveryTime.value) {
        if (state.switchStatus == 1 && state.text.length > 100) {
            if (Math.floor(Math.random() * (10 - 1 + 1)) + 1 == 2) {
                EveryTime.value = false;
                //随机的emoji表情
                let mathNum = Math.floor(Math.random() * faceList.value.length);

                let strnum = Math.floor(Math.random() * state.text.length);

                state.text =
                    state.text.slice(0, strnum) +
                    faceList.value[mathNum] +
                    state.text.slice(strnum);
            }
        }
    }
};

const clearSysPhoneNumber = () => {
    system_phonenumber.value = null;
    sherhchange();
};

const sendinfo = async () => {
    // if (switchStatus.value == 1) {
    //     isSend.value = true;
    //     isSend.value = false;
    // }
    console.log(123123);
    let strdh = 'Missed call from';
    let imgsad = `<img style="height:24px;" src=/src/assets/dh.png />`;
    if (state.text.includes(strdh)) {
        state.text = imgsad;
    }
    let mathNum = Math.floor(Math.random() * emos.length);
    let data = {
        user_id: state.userId,
        message_content: emoswitch.value
            ? Math.random() * 10 < 5
                ? state.text.trim() + emos[mathNum]
                : emos[mathNum] + state.text.trim()
            : state.text.trim(),
        conversation_id: conversationid.value
    };
    data.conversation_id = newId.value || conversationid.value;
    if (!data['message_content']) {
        return;
    }
    isSend.value = true;
    if (activeName.value === 2) {
        // console.log(111111111);
        let params = {
            con_id: data.conversation_id,
            message_content: data.message_content,
            user_id: route.query.user_id || user.id
        };
        await $request
            .post('/client/commonConversation/sendMessage', params)
            .then(async (res) => {
                state.text = '';
                let { items } = await getTcardList(
                    params.con_id,
                    route.query.user_id || user.id
                );
                let imgsad = `<img style="height:24px;display: inline-block;" src=/src/assets/dh.png />`;
                datillist.value = items.map((n) => {
                    return {
                        ...n,
                        message_content:
                            n.direction === 2
                                ? n.message_content.replace('Cash App', imgsad)
                                : n.message_content
                    };
                });
                resetPage();
            })
            .catch((e) => {});
        isSend.value = false;
        return;
    }
    let url = state.userId
        ? '/client/message/manualMessageByAdmin'
        : '/client/message/manualMessage';

    $request.post(url, data).then(async (res) => {
        isSend.value = false;
        state.text = '';
        datillist.value = state.userId
            ? await getListByAdminAPI(conversationid.value)
            : await getMessageAPI(newId.value || conversationid.value);
        resetPage();
    });
};
// 创建对话
// const addMessage = (item) => {
//     if (
//         activeObj.value.is_reply === 1 &&
//         activeObj.value.is_customer_service === 0 &&
//         config_value.value.is_force_customer_service === 1 &&
//         config_value.value.customer_service_type === 'tcard'
//     ) {
//         let params = {
//             old_con_id: item.conversation_id,
//             target_phonenumber: other.value,
//             old_con_type:
//                 activeName.value === 0
//                     ? 'tn'
//                     : activeName.value === 1
//                     ? 'tf'
//                     : 'tcard'
//         };
//         $request
//             .post('/client/commonConversation/create', params)
//             .then(async (res) => {
//                 console.log(records);
//                 if (res.id) {
//                     activeObj.value.is_reply = res.is_reply;
//                     newId.value = res.id;
//                     records.value.map(async (i, index) => {
//                         let items = {
//                             ...i,
//                             target_phone_number: i.target_phone_number
//                         };
//                         if (item.conversation_id == items.id) {
//                             other.value = items.target_phone_number;
//                             state.infostatus = index;
//                             conversationid.value = item.id;
//                             mobileNum.value = items.target_phone_number;
//                             let { items } = await getTcardList(
//                                 res.id,
//                                 route.query.user_id || user.id
//                             );
//                             let imgsad = `<img style="height:24px;display: inline-block;" src=/src/assets/dh.png />`;
//                             datillist.value = items.map((n) => {
//                                 return {
//                                     ...n,
//                                     message_content:
//                                         n.direction === 2
//                                             ? n.message_content.replace(
//                                                   'Cash App',
//                                                   imgsad
//                                               )
//                                             : n.message_content
//                                 };
//                             });
//                             if (items) {
//                                 otherRemand.value = res.avatar_id;
//                                 resetPage();
//                             }
//                         }
//                     });
//                     handleClick('three', true);
//                 }
//             });
//         return;
//     }
//     let params = {
//         target_phone_number: other.value,
//         project_id: ProjectId.value,
//         old_conversation_id: item.conversation_id
//     };
//     $request
//         .post('/client/conversaion/create', params)
//         .then(({ id, is_reply }) => {
//             if (id) {
//                 activeObj.value.is_reply = is_reply;
//                 newId.value = id;
//                 records.value.map(async (items, index) => {
//                     if (item.conversation_id == items.id) {
//                         other.value = items.target_phone_number;
//                         state.infostatus = index;
//                         conversationid.value = item.id;
//                         mobileNum.value = items.target_phone_number;

//                         let list = await getMessageAPI(id);
//                         list && resetPage();
//                         otherRemand.value = Math.floor(Math.random() * 8) + 1;
//                     }
//                 });
//                 if (res.data.is_reply == 1) {
//                     console.log('等于1 跳转群发');
//                     handleClick('first');
//                 } else {
//                     console.log('等于0 跳转列表');
//                     handleClick('second');
//                 }
//             }
//         });
// };
</script>
<style lang="less" scoped>
.fr {
    float: right;
}
.mr22 {
    margin-right: 22px;
}
.app-container {
    height: 100%;
    .dialogbox-content {
        display: flex;
        width: 100%;
        height: 100%;
        border-radius: 30px 15px 15px 15px;
        .dialogbox-content-left {
            max-width: 360px;
            min-width: 360px;
            padding: 10px;
            border-radius: 10px;
            background-color: @chat-bg-color;
            height: 100%;
            width: 35%;
            .arco-spin {
                width: 100%;
                height: calc(100% - 20px);
                overflow: hidden;
            }
            .content-left-header {
                width: 100%;
                padding: 16px 20px;
                background: #f9fafb;
                height: 64px;
                border-radius: 30px 0 0 0;
                display: flex;
                align-items: center;
                span {
                    margin-left: 40px;
                    font-size: 14px;
                    font-weight: 600;
                    cursor: pointer;
                }
            }
            .content-left-search {
                width: 100%;
                display: flex;
                padding: 10px 20px;
                height: 56px;
                .arco-input-wrapper {
                    border-radius: 12px;
                }
            }
            .content-left-conversation {
                width: 100%;
                height: calc(100% - 56px);
                .listmap {
                    width: 100%;
                    overflow: auto;
                    height: calc(100% - 95px);
                    .tabcor {
                        background-color: @rows-hover-bg-color;
                    }
                    .panellist:hover {
                        background-color: @rows-hover-bg-color;
                    }
                    .panellist:first-child {
                        margin-top: 0;
                    }
                    .panellist {
                        display: flex;
                        align-items: center;
                        border-radius: 10px;
                        width: 100%;
                        cursor: pointer;
                        margin-top: 10px;
                        .infolistmap {
                            width: 100%;
                            height: 100%;
                            padding: 10px 10px;
                            border-radius: 10px;
                            border-bottom: @infolistmap-color;
                            .avatar {
                                height: 40px;
                                width: 40px;
                                border-radius: 20px;
                                img {
                                    height: 100%;
                                    width: 100%;
                                    border-radius: 20px;
                                }
                            }
                            .centeinfo {
                                max-width: 160px;
                                max-width: 100px;
                                text-align: left;
                                flex-direction: column;
                                height: 40px;
                                padding-left: 10px;
                                .font_bo {
                                    width: 100%;
                                    color: @chat-row-color;
                                    font-family: PingFangSC-Medium;
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 700;
                                    padding: 1px 0;
                                    line-height: 17px;
                                }
                                .cocc {
                                    width: 100%;
                                    color: #7a7a7a;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 14px;
                                    overflow: hidden;
                                    padding: 1px 0;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                            .infotime {
                                flex-direction: column;
                                justify-content: space-between;
                                height: 40px;
                                font-size: 12px;
                                .unread-count {
                                    background-color: #ff3742;
                                    align-self: center;
                                    align-items: center;
                                    border-radius: 16px;
                                    color: #fff;
                                    display: flex;
                                    font-size: 11px;
                                    font-weight: 700;
                                    height: 16px;
                                    justify-content: center;
                                    margin: 2px 0 2px auto;
                                    padding: 2px 5px 1px;
                                    width: 20px;
                                }
                            }
                        }
                    }
                }
                .listmap::-webkit-scrollbar {
                    width: 7px;
                }

                .listmap::-webkit-scrollbar-thumb {
                    background: #ffffff10; /* 滚动条滑块颜色 */
                    border-radius: 4px; /* 滚动条滑块圆角 */
                }

                .listmap::-webkit-scrollbar-thumb:hover {
                    background: #ffffff50; /* 滚动条滑块 hover 状态颜色 */
                }
            }
        }
        .dialogbox-content-right {
            flex: 1;
            height: 100%;
            .content-right-header {
                padding: 16px 20px;
                align-items: center;
                .avatar {
                    width: 40px;
                    height: 40px;
                }
                .phone {
                    height: 46px;
                    padding: 0 8px;
                    font-family: PingFangSC-Medium;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 700;
                }
            }
            .content-right-content {
                height: 100%;
                width: 100%;
                background: @chat-bg-color;
                margin-left: 10px;
                border-radius: 10px;
            }
        }
    }
}
.zujl {
    padding: 50px 0;
}
.panetop {
    flex-direction: column;
    .contents {
        padding: 0 20px 20px;
        max-width: calc(100% - 40px);
        overflow-y: auto;
        display: block;
        font-size: 0px;
        .others {
            max-width: 30%;
            display: flex;
            margin-bottom: 15px;
            .others_hander {
                width: 40px;
                flex-shrink: 0;
                margin-right: 10px;
                img {
                    width: 40px;
                }
            }
            .others_text {
                font-family: PingFangSC-Medium;
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
                color: #7a7a7a;
            }
            .chat_bubble {
                display: inline-block;
                word-wrap: break-word;
                position: relative;
                border-radius: 0 10px 10px 10px;
                height: auto;
                word-break: break-all;
                font-size: 15px;
                padding: 6px 10px;
                background: #2165ff;
                color: #fff;
                margin-top: 4px;
            }
        }
        .oneself {
            max-width: 100%;
            margin-bottom: 15px;
            justify-content: flex-end;
            position: relative;
            .oneself-tips {
                width: 100%;
                position: absolute;
                bottom: -50px;
                display: flex;
                cursor: pointer;
            }
            .others_hander {
                width: 40px;
                margin-left: 10px;
                img {
                    width: 40px;
                }
            }
            .others_text {
                font-family: PingFangSC-Medium;
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
                color: #7a7a7a;
            }
            .bandSend {
                display: flex;
                align-items: center;
                padding-right: 10px;
            }
            .chat_bubble {
                word-break: break-all;
                max-width: 60%;
                position: relative;
                border-radius: 10px 0 10px 10px;
                height: auto;
                padding: 6px 10px;
                color: #fff;
                background-color: #4e5969;
                margin-top: 4px;
            }
        }
        .marginMes {
            margin-bottom: 50px;
        }
    }
    .contents::-webkit-scrollbar {
        width: 0;
    }
    /* 滚动条轨道 */
    .contents::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    /* 滚动条滑块 */
    .contents::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }
    /* 滑块拖动时（活动状态） */
    .contents::-webkit-scrollbar-thumb:active {
        background: #555;
    }
    .footer {
        flex-direction: column;
    }
}
.sendtitle {
    padding: 10px;
    .sendiconlist {
        margin-right: 5px;
        color: #fff;
        img {
            width: 25px;
            height: 25px;
            margin-right: 5px;
        }
    }
}
.sendxinfo {
    position: relative;
    .arco-textarea-wrapper {
        border-radius: 20px;
        background-color: #333b48;
        color: white;
        padding: 5px 0 10px;
    }
    .sending {
        position: absolute;
        right: 20px;
        bottom: 0;
    }
}
.zujl {
    padding: 50px 0;
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }
}
.emoji-list {
    position: absolute;
    width: 600px;
    background-color: @emos-list-bg-color;
    border: @emos-list-border-color;
    padding: 10px;
    transform: translateY(-137%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
.emoji-list span {
    cursor: pointer;
    font-size: 20px;
    margin: 5px;
}
.quick-reply {
    width: 400px;
    height: 200px;
    overflow: auto;
    .quick-reply-item {
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .quick-reply-item:hover {
        background-color: #ddd;
    }
}
//标签下长灰线
::v-deep .ant-tabs-top > .ant-tabs-nav::before {
    border-bottom: none !important;
}
//标签蓝色下标
::v-deep .ant-tabs-ink-bar {
    background-color: white;
    display: none !important;
}
//标签激活状态样式
::v-deep .ant-tabs-tab-active {
    background-color: rgba(236, 242, 254, 1) !important; // 激活状态下的背景颜色
    color: #fff !important; // 激活状态下的文本颜色
    border-radius: 30px;
    padding: 10px;
    height: 28px;
}
::v-deep .arco-tabs-nav::before {
    content: '';
    display: none !important;
}
::v-deep .arco-tabs-tab-active {
    background-color: transparent;
}
::v-deep .arco-tabs-nav-tab-list {
    display: flex;
    justify-content: center;
}
::v-deep .arco-tabs-nav {
    background-color: transparent;
    border-radius: 16px;
}
::v-deep
    .arco-tabs-nav-type-line
    .arco-tabs-tab:hover
    .arco-tabs-tab-title::before {
    background-color: transparent;
}

::v-deep .arco-tabs-tab-title:hover .arco-tabs-tab-title::before {
    content: '';
    display: none;
    background-color: transparent !important;
}
::v-deep .arco-tabs-nav-tab-list {
    flex: 1;
}
::v-deep .arco-tabs-nav-tab {
    padding: 0px 0 10px;
}
//标签未激活状态样式
::v-deep .ant-tabs-tab {
    background-color: rgba(245, 245, 245, 1) !important;
    border-radius: 30px;
    padding: 10px;
    height: 28px;
    color: rgba(128, 128, 128, 1) !important;
}
::v-deep .arco-tabs-content {
    padding: 0;
}
::v-deep .arco-input-wrapper {
    outline: none;
    border: none;
}

.dialog-foot {
    text-align: end;
}

.dialogbox-content-right {
    ::v-deep .arco-spin-loading,
    .arco-spin {
        display: flex;
        height: 100%;
        .arco-spin-mask {
            background: #000;
            opacity: 0.5;
        }
    }
}

.record-info {
    color: @input-fill-color;
}

.chat-txtarea {
    background-color: @textarea-bg-color;
    color: @d-color;
}
.serch-input,
.arco-input-wrapper {
    background-color: @sinput-bg-color;
    color: @input-color;
}

.search-img {
    cursor: pointer;
    filter: @search-img-color;
    position: absolute;
    z-index: 10;
    left: 4px;
}

.reset-o::-webkit-scrollbar {
    width: 4px;
}
.reset-o::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--color-text-4);
}

.arco-tag-size-large {
    height: 30px;
}
.arco-tag {
    background: @tag-bg-color;
    color: @tag-color;
}

::v-deep .arco-modal {
    background: @modal-bg-color;
}

::v-deep .arco-modal-title {
    color: @input-color;
}

::v-deep .arco-icon-hover .arco-icon {
    color: @input-color;
}

::v-deep .rounded {
    color: @input-color;
    // background: @imp-bg-color;
}

::v-deep .arco-modal-body {
    color: @modal-body-color;
}

::v-deep .arco-form-item-label {
    color: @input-color;
}

.dialog-inp.arco-input-wrapper {
    background-color: @input-bg-color;
    color: @input-color;
}
.cored {
    color: red;
}
</style>
